<!-- 左侧小弹窗(推送设置、地图工具) -->
<template>
  <div class="left-popup-container">
    <div class="setUp-title">
      <i class="el-icon-caret-right"></i>
      {{modelName=='WebsocketSet'?'设置':'工具'}}
      <div class="close-btn" @click="closePopup"></div>
    </div>
    <!-- 关闭弹框 -->
    <component :is="modelName" :parames="parames" @closePopup="closePopup" v-if="isShow"></component>
  </div>
</template>

<script>
import WebsocketSet from '../DialogCards/WebsocketSet/Main' //推送设置
import ToolsBaidu from '../DialogCards/ToolsBaidu/Main' // 工具（百度）
import ToolsFmap from '../DialogCards/ToolsFmap/Main' // 工具（蜂鸟）
import Tools3D from '../DialogCards/Tools3D/Main' //  工具（三维）
export default {
  name: 'Popup',
  components: {
    WebsocketSet,
    ToolsBaidu,
    ToolsFmap,
    Tools3D,
  },
  props: {
    openLeftDialog: {
      type: Function,
      default() {
        false
      },
    },
    // 页面类型
    pageType: {
      default() {
        return false
      },
    },
    // 查询参数
    queryObj: {
      default() {
        return false
      },
    },
  },
  data() {
    return {
      isShow: false,
      modelName: this.pageType,
      parames: this.queryObj,
    }
  },
  created() {
    window.FunList.openLeftDialog = this.initPage
    window.FunList.closeLeftDialog = this.closePopup
  },
  methods: {
    // 页面初始化
    initPage(pageName, parames, callback) {
      let that = this
      if (that.openLeftDialog && typeof that.openLeftDialog === 'function') {
        //重复调用同一种弹窗，关闭该弹窗
        if (pageName == that.modelName && that.isShow) {
          that.closePopup()
        } else {
          // 打开弹框
          that.isShow = true
          that.openLeftDialog(true)
        }
      }
      that.modelName = pageName
      that.parames = parames
    },
    // 关闭弹框
    closePopup() {
      let that = this
      that.isShow = false
      //that.$Ctl.clearMapMark()
      if (that.openLeftDialog && typeof that.openLeftDialog === 'function') {
        that.openLeftDialog(false)
      }
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss">
.left-popup-container {
  border: 1px solid rgba(60, 131, 246, 0.5);
  border-radius: 10px;
  background: url(../../assets/images/detailPage/setup_bg.png) center center
    no-repeat;
  .setup_li_switch {
    zoom: 1.3;
    .el-switch__core:after {
      content: '';
      position: absolute;
      top: -1px;
      border-radius: 100%;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      width: 21px;
      height: 21px;
      background-color: rgba(144, 146, 149, 1);
    }
  }
  .setup_li_switch.is-checked {
    .el-switch__core:after {
      background-color: #3c83f6;
    }
  }
  .setUp-title {
    position: relative;
    color: #fff;
    display: flex;
    margin-top: 23px;
    margin-left: 10px;
    font-size: 24px;
    .close-btn {
      position: absolute;
      cursor: pointer;
      top: 0;
      right: 20px;
      width: 30px;
      height: 30px;
      background: url(../../assets/images/dialogCards/close-btn.png) center
        center no-repeat;
    }
  }
  .el-icon-caret-right {
    font-size: 30px;
    display: block;
  }
  .fontSize30 {
    font-size: 30px;
  }
  hr {
    height: 1px;
    margin: 10px;
    opacity: 0.2;
  }
  .el-tabs--card > .el-tabs__header {
    border: none;
  }
  .el-tabs__item {
    color: rgba(163, 190, 221, 1);
  }
  .el-tabs__item.is-active {
    color: #fff;
    background: rgba(51, 114, 212, 1);
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item {
    border-left: 1px solid rgba(51, 114, 212, 1);
  }
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border: 1px solid rgba(51, 114, 212, 1);
    border-radius: 8px;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item:first-child {
    border-left: none;
    border-radius: 6px 0 0 6px;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item:last-child {
    border-radius: 0 6px 6px 0;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    border-bottom: none;
  }
  .btn-group-tools {
    .search-input {
      width: calc(100% - 60px);
      outline: none;
      padding-left: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      margin: 0 30px 15px;
      font-size: 16px;
      .el-input__prefix {
        color: #89f8ff;
      }
      .el-input__inner {
        background-color: rgba(255, 255, 255, 0);
        color: #fff;
        border: none;
      }
      input::-webkit-input-placeholder {
        color: #505961;
      }
      input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #505961;
      }
      input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #505961;
      }
      input:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #505961;
      }
    }
  }
}
</style>
